<template>
	<view class="product bg_color">
		<view class="search">
			<u-search @search="search" placeholder="搜索产品" input-align="center" :show-action="false" :clearabled="true"
				v-model="keyword">
			</u-search>
		</view>
		<u-tabs-swiper ref="uTabs" active-color="#D19A60" :current="current" @change="tabsChange" :is-scroll="false"
			:list="category">
		</u-tabs-swiper>
		<u-waterfall v-model="product" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<block v-for="(item, index) in product" :key="index">
					<view @click="toDetail(item)" class="list-item flex-col" v-if="!(index%2)">
						<view class="top-group flex-col">
							<view class="section_4"> </view>
							<image class="image_6" :src="item.image" mode="aspectFill" />
						</view>
						<text class="text_9">{{item.name}}</text>
						<text class="text_11">{{item.describe}}</text>
					</view>
				</block>
			</template>
			<template v-slot:right="{rightList}">
				<block v-for="(item, index) in product" :key="index">
					<view @click="toDetail(item)" class="list-item flex-col" v-if="index%2">
						<view class="top-group flex-col">
							<view class="section_4"> </view>
							<image class="image_6" :src="item.image" mode="aspectFill" />
						</view>
						<text class="text_9">{{item.name}}</text>
						<text class="text_11">{{item.describe}}</text>
					</view>
				</block>
			</template>
		</u-waterfall>
		<u-loadmore v-if="product != ''" icon-color="#D19A60" color="#D19A60" @loadmore="loadmore" margin-bottom="20"
			margin-top="20" :load-text="loadText" :status="status" />
		<u-empty style="padding-top: 330rpx;" v-if="product == ''" text="这里没有内容哦" mode="list"></u-empty>
		<u-tabbar :list="tabbar" :mid-button="false"></u-tabbar>
	</view>
</template>

<script>
	var that;
	var vk;
	export default {
		data() {
			return {
				tabbar: [],
				keyword: "",
				category: [{
					name: '全部',
					_id: ''
				}],
				current: 0,
				pageSize: 10,
				pageIndex: 1,
				swiperCurrent: 0,
				product: [],
				status: 'loadmore',
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '正在加载，请稍后...',
					nomore: '到底了'
				}
			}
		},
		onReachBottom() {
			if (this.status == 'nomore') return
			this.status = 'loading';
			this.pageIndex = ++this.pageIndex;
			this.loadmore(1);
		},
		onLoad() {
			that = this;
			vk = that.vk;
			let base_info = uni.getStorageSync('base_info')
			that.tabbar = base_info.tabbar
			// 从缓存中获取分类
			uni.getStorage({
				key: 'prduct_category',
				success: res => {
					that.category = that.category.concat(res.data)
				}
			})
			that.$api.productCategory({}).then((res) => {
				if (res.code == 0) {
					let category = [{
						name: '全部',
						_id: ''
					}]
					that.category = category.concat(res.rows)
					uni.setStorage({
						key: 'prduct_category',
						data: res.rows
					})
				} else {
					vk.toast('网络开小差了~')
				}
			}).catch((err) => {})
			//初次加载
			this.load('', '');
		},
		methods: {
			toDetail(item) {
				vk.navigateTo('/pages/product-detail/product-detail?_id=' + item._id)
			},
			// tabs通知swiper切换
			tabsChange(index) {
				let data = this.category[index]
				this.current = index;
				this.swiperCurrent = index;
				this.page = 1;
				this.rows = 4;
				this.keyword = '';
				this.load(data._id, this.keyword)
			},
			search(more = 0) {
				let data = this.category[this.current]
				this.load(data._id, this.keyword, 0)
			},
			loadmore(click = 0) {
				if (!click) {
					this.status = 'loading';
					this.page = ++this.page;
				}
				let data = this.category[this.current]
				that.$api.product({
					dproduct_category_id: data._id,
					search: that.keyword,
					page: that.page,
					rows: that.rows
				}).then((data) => {
					if (data.code == 0) {
						if (vk.pubfn.isNull(data.product)) { //没数据了
							that.status = 'nomore'
						} else {
							that.status = 'loadmore'
							that.product = that.product.concat(data.product)
						}
					} else {
						vk.toast('网络开小差了~')
					}
				}).catch((err) => {})
			},
			load(dproduct_category_id, search, more = 0) {
				that.$api.product({
					dproduct_category_id: dproduct_category_id,
					search: search,
					pageIndex: that.pageIndex,
					pageSize: that.pageSize
				}).then((res) => {
					if (res.code == 0) {
						if (!more) {
							that.product = res.rows
						} else {
							that.product = that.product.concat(res.rows)
						}
						if (!res.hasMore) {
							that.status = 'nomore'
						}

					} else {
						vk.toast('网络开小差了~')
					}
				}).catch((err) => {})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.list-item {
		margin: 10rpx;
		// padding: 10rpx 14rpx 10rpx 16rpx;
		flex: 1 1 360rpx;
		background-color: #fff;

		.top-group {
			padding-top: 225rpx;
			position: relative;

			// .section_4 {
			// 	margin: 0 14rpx;
			// 	background-color: rgba(0, 0, 0, 0.09);
			// 	filter: blur(5rpx);
			// 	border-radius: 13rpx;
			// 	height: 25rpx;
			// }

			.image_6 {
				border-radius: 6rpx;
				// width: 330rpx;
				width: 100%;
				height: 240rpx;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
			}
		}

		.text_9 {
			margin: 10rpx;
			color: rgb(34, 34, 34);
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			// white-space: nowrap;
			text-transform: uppercase;
		}

		.text_11 {
			margin: 0 10rpx 10rpx 10rpx;
			// margin-right: 10rpx;
			// margin-top: 10rpx;
			color: rgb(153, 153, 153);
			font-size: 20rpx;
			line-height: 34rpx;
			text-align: left;
			text-transform: uppercase;
		}
	}

	.search {
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;
	}
</style>
